<template>
	<view class="vip">
		<view class="image-text_1">
			<text class="text-group_1" v-if="userInfo.level === 0">{{ $t('非会员') }}</text>
			<text class="text-group_1" v-if="userInfo.level === 1">{{ $t('黄金') }}</text>
			<text class="text-group_1" v-if="userInfo.level === 2">{{ $t('铂金') }}</text>
			<text class="text-group_1" v-if="userInfo.level === 3">{{ $t('钻石') }}</text>
		</view>
		<image class="image_1" referrerpolicy="no-referrer" :src='serverImageUrl("/static/images/user/longline.png")' />
		<text class="text_4" v-if="userInfo.level > 0">
			{{ $t('您的会员将于') }}{{ timeFormat(userInfo.vip_expire_time) }}{{ $t('过期') }}
		</text>
		<text class="text_4" v-if="userInfo.level === 0">{{ $t('您还不是会员') }}</text>
		<view class="text-wrapper_1" v-if="userInfo.level === 0" @click="member">
			{{ $t('开通会员') }}
		</view>
		<view class="text-wrapper_1" v-if="userInfo.level > 0" @click="member">
			{{ $t('续费') }}
		</view>
	</view>
</template>

<script>
	export default {
		props: ["userInfo"],
		data() {
			return {

			}
		},
		methods: {
			timeFormat(val) {
				val = val.replace(/-/g, "/");
				return this.$u.timeFormat(val, 'yyyy-mm-dd')
			},
			// 开通会员跳转
			member() {
				this.$u.route('pages/user/MemberCenter/MemberCenter')
			},
		}
	}
</script>

<style lang="scss">
	.vip {
		width: 100%;
		height: 90rpx;
		background-image: url("https://app.gluz.com.cn/uniappAssets/static/images/user/newUI/vipbg.png");
		background-size: 100% 100%;
		border-radius: 8rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 70rpx;
		overflow: hidden;
		padding-right: 150rpx;
		position: relative;

		.text-wrapper_1 {
			width: 130rpx;
			height: 90rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #FCCF14;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22rpx;
			color: #3D3D3D;
			position: absolute;
			right: 0;
		}

		.text_4 {
			max-width: 80%;
			flex-shrink: 0;
			color: #999;
			font-size: 24rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.image_1 {
			width: 2rpx;
			height: 43rpx;
		}

		.image-text_1 {
			display: flex;
			align-items: center;

			.label_1 {
				width: 40rpx;
				height: 40rpx;
				margin: 6rpx 0 3rpx 0;
			}

			.text-group_1 {
				min-width: 100rpx;
				max-width: 144rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 26rpx;
				word-break: break-all;
				color: #FFDC20;
				line-height: 90rpx;
				margin-left: 10rpx;
				font-weight: bold;
			}
		}

	}
</style>